<template>
    <div id="mine">
        <Navbar>美乐乐</Navbar>
        <div id="mineup">
            <router-link to="/Mine/Avatar">
                <div id="mineup-up">
                    <p>
                        <img :src="'/images/avatar/'+user.avatar" v-if="user.avatar">
                        <img :src="'/images/avatar/avatar.png'"  v-if="!user.avatar">
                        <span>{{userinfo.account}}</span>
                    </p>
                    <p class="fa fa-angle-right"></p>
                </div>
            </router-link>
            <div id="mineup-down">
                <p><router-link to="/Cart" style="color:white;"><span  class="fa fa-shopping-cart"></span><br><span>购物车</span></router-link></p>
                <p><span  class="fa fa-star-o"></span><br><span>我的收藏</span></p>
                <p><router-link to="/" style="color:white;"><span  class="fa fa-search"></span><br><span>自助查询</span></router-link></p>
            </div>
        </div>
        
    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{
           user:{}
        }
    },
    components:{
        Navbar,
    },
    methods:{
        
    },
    mounted(){
        this.$store.dispatch("requestIsLogin");
        this.http.post("/api/users/searchavatar",{_id:this.userinfo._id})
        .then(res=>{
            this.user = res.data.data;
        })
    },
    computed:{
        ...mapState([
            "userinfo"
        ])
    }
}
</script>

<style scoped>
#mine{
    background-color: #eeeeee;
}
#mineup-up{
    margin-top:8px;
    width:100%;
    height:100px;
    background-image: -moz-linear-gradient(top,#6F4C86,#875387);
    display: flex;
    justify-content: space-between;
      color: #FFFFFF;
}
#mineup-up p:nth-of-type(1){
    position: relative;
    top:20px;
    left: 30px;
}
#mineup-up p span{
    position:relative;
    top:-20px;
}
#mineup-up p:nth-of-type(2){
    font-size: 32px;
    position: relative;
    top:30px;
    left: -20px;
  
}
#mineup-down{
    width:100%;
    height:40px;
    display:flex;
    justify-content: space-around;
    text-align: center;
    background-color: #6D4167;
    color:#FFFFFF;
    padding-top:2px;
}
#mineup-down p span:nth-of-type(1){
    font-size:18px;
}
#mineup-down p span:nth-of-type(2){
    font-size:12px;
}
img{
    width:50px;
    height:50px;
    border-radius: 50%;
}


</style>